<template>
  <div>
    <div class="alarm-list" v-if="alarmList.length > 0">
      <div class="table-head">
        <div>船舶名称</div>
        <div>告警类型</div>
        <div>告警时间</div>
        <div>位置</div>
      </div>
      <div class="table-head table-body" v-for="(item, index) in alarmList" :key="index">
        <div>{{item.deptName}}</div>
        <div>{{item.algorithm_name}}</div>
        <div>{{item.alarm_dt}}</div>
        <div>{{item.camera_name}}</div>
      </div>
    </div>
    <div v-if="alarmList.length == 0" style="margin-top: 120px;text-align: center;">暂无数据</div>
  </div>
</template>

<script>
  import './index.css'
  export default {
    data() {
      return {
        alarmList: []
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>

<style scoped>
  .table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    font-size: 14px;
  }

  .table-body {
    padding: 12px 6px;
  }

  .table-head>div {
    width: calc(100% / 4);
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
